<template>
	<view class="form-cont" v-if="form">
		<u-calendar v-model="showDate" mode="date" @change="dateChange"></u-calendar>
		<u-select v-model="showSelect" :list="selectList" @confirm="selectConfim"></u-select>
		<template v-for="(item,index) in formContent">
			<!--单行文本-->
			<view class="form-col" v-if="item.__config__.tagIcon==='input'" :key="index">
				<text>{{item.__config__.label}}</text>
				<input type="text" v-model="form[item.__vModel__]" :placeholder="item.placeholder"
					placeholder-class="inputClass" />
			</view>

			<!--多行文本-->
			<view v-if="item.__config__.tagIcon==='textarea'" :key="index" class="flex-col form-col"
				style="flex-direction: column;justify-content: flex-start;">
				<text style="text-align: left;justify-content: flex-start;width: 100%;">{{item.__config__.label}}</text>
				<textarea auto-height maxlength="200" v-model="form[item.__vModel__]" placeholder="请输入最多200个字符…"
					placeholder-class="inputClass"></textarea>
			</view>

			<!--计数-->
			<view class="form-col" v-if="item.__config__.tagIcon==='number'" :key="index">
				<text>{{item.__config__.label}}</text>
				<input type="number" v-model="form[item.__vModel__]" :placeholder="item.placeholder"
					placeholder-class="inputClass" />
				<!--<u-number-box class="num-box" v-model="form[item.__vModel__]" @change="valNumChange($event,item.__vModel__)"></u-number-box>-->
			</view>

			<!--日期选择-->
			<view class="form-col" v-if="item.__config__.tagIcon==='date'" :key="index">
				<text>{{item.__config__.label}}</text>
				<view>
					<text @click="showDateChangeFn(item.__vModel__)">{{form[item.__vModel__]||'请点击选择日期'}}</text>
					<u-icon name="arrow-right"></u-icon>
				</view>

			</view>

			<!--下拉选择-->
			<view class="form-col" v-if="item.__config__.tagIcon==='select'" :key="index">
				<text>{{item.__config__.label}}</text>
				<view>
					<text @click="showSelectFn(item.__vModel__,item)">{{form[item.__vModel__]||'请点击选择'}}</text>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>

			<!--单选-->
			<view class="form-col" :class="{'flex-column':flexColum}" v-if="item.__config__.tagIcon==='radio'" :key="index">
				<text :style="flexColum?'margin-bottom:30rpx':''">{{item.__config__.label}}</text>
				<radio-group  @change="vaccinationChange($event,item.__vModel__)">
					<label v-for="(item2, index2) in item.__slot__.options" :key="index2">
						<radio :value="item2.label" :checked="form[item.__vModel__] == item2.label" />
						<span style="margin-left: 30rpx;">{{item2.label}}</span>
					</label>
				</radio-group>
			</view>

			<!--多选-->
			<view class="form-col form-check-group" v-if="item.__config__.tagIcon==='checkbox'" :key="index">
				<text class="form-check-group-t">{{item.__config__.label}}</text>
				<checkbox-group @change="checkboxChange($event,item.__vModel__)">
					<label class="uni-list-cell uni-list-cell-pd" v-for="(item2, index2) in item.__slot__.options"
						:key="index2">
						<view class="chck-col">
							<view>
								<checkbox :value="item2.label" />
							</view>
							<view class="c-label">{{item2.label}}</view>
						</view>
					</label>
				</checkbox-group>
			</view>
		</template>


	</view>
</template>

<script>
	export default {
		name: "Parser",
		props: {
			formContent: {
				default: [],
				type: Array,
			},
      flexColum:{
        default: false
      }
		},
		data() {
			return {
				clickModel: '',
				showSelect: false,
				form: null,
				showDate: false,
				selectList: [],
				selectVal: ''
			};
		},
		created() {
			console.log(this.formContent)
			if (this.formContent) {
				this.form = this.initForm()
        console.log(this.form)
			}
		},
		methods: {
			initForm() {
				let obj = {}
				this.formContent.forEach(item => {
          console.log("item",item)
					obj[item.__vModel__] = item.__slot__.options.find(item2=>{
            console.log("item2.value",item2.value)
            return item2.value==item.__config__.defaultValue
          }).label
        })
				return obj
			},
			checkboxChange(e, model) {
				this.form[model] = e.detail.value.toString()
			},
			vaccinationChange(e, model) {
				this.form[model] = e.detail.value
			},
			showDateChangeFn(model) {
				this.clickModel = model
				this.showDate = true
			},
			dateChange(e) {
				this.form[this.clickModel] = e.result
			},
			valNumChange(e, model) {
				this.form[model] = e.value
			},
			showSelectFn(model, item) {
				this.clickModel = model
				this.selectList = item.__slot__.options
				this.showSelect = true
			},
			selectConfim(e) {
				this.form[this.clickModel] = e[0].label
			}
		}
	}
</script>

<style lang="scss" scoped>
	.form-cont {
		font-size: 30rpx;
		font-family: PingFang-SC-Medium, PingFang-SC;
		font-weight: 500;
		color: #999;
		box-sizing: border-box;
		border-radius: 12rpx;
		background: #FFFFFF;
		overflow: hidden;
		width: 100%;
		height: 100%;
		margin-bottom: 20rpx;


		.form-col {
			padding: 28rpx 0 30rpx;
			// border-bottom: 1upx solid #eee;
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-direction: row;
			position: relative;

			&::after {
				content: "";
				position: absolute;
				width: 100%;
				height: 1px;
				bottom: 0;
				left: 0;
				background-color: #eee;
				transform: scaleY(0.5);
			}

			&:last-child{
				padding-bottom: 8rpx;
			}


		}

    .flex-column{
      flex-direction: column;
      align-items: flex-start;
    }

		.form-col:last-child::after {
			content: "";
			display: none !important;
			height: 0 !important;
		}

		text:nth-child(1) {
			display: inline-block;
			height: 100%;
		}

		text:nth-child(2) {
			display: inline-flex;
			flex-grow: 1;
			text-align: end;
			justify-content: flex-end;
			align-items: center;
			font-size: 30rpx;
			border: none;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			text-align: end;

			.u-icon {
				padding: 0;
				position: relative;
				transform: translateY(-3rpx);
			}
		}


		uni-radio-group {
			uni-label {
				margin-left: 20rpx;
			}

			/deep/ .uni-radio-input-checked {
				background: #44D94B;
			}

			.uni-radio-input {
				margin-right: 4rpx;
				width: 28rpx;
				height: 28rpx;
			}
		}

		radio-group {
			label {
				margin-left: 20rpx;
			}

			radio {
				margin-right: 4rpx;
				width: 28rpx;
				height: 28rpx;
			}
		}

		textarea {
			width: 100%;
			margin-top: 20rpx;
			font-size: 30rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			min-height: 200rpx;
		}


		/deep/ .uni-textarea-wrapper {
			font-size: 30rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			line-height: 40rpx;
		}

		/deep/ .uni-textarea-placeholder {
			font-size: 30rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
			line-height: 40rpx;
		}

		textarea {
			margin-top: 20rpx;
			font-size: 30rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
		}




		text {
			font-size: 30rpx;
			font-family: PingFang-SC-Medium, PingFang-SC;
			color: #666666;
			line-height: 40rpx;
		}

		input {
			text-align: right;
		}

		/deep/ .input-placeholder {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
		}

		/deep/ .uni-input-input {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			text-align: right;
			font-size: 30rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
		}

		/deep/ .uni-textarea-wrapper {
			font-size: 30rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			line-height: 40rpx;
		}

		/deep/ .uni-textarea-placeholder {
			font-size: 30rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
			line-height: 40rpx;
		}

		textarea {
			margin-top: 20rpx;
			font-size: 30rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
		}

		text {
			font-size: 30rpx;
			font-family: PingFang-SC-Medium, PingFang-SC;
			color: #666666;
			line-height: 40rpx;
		}
	}

	.form-check-group {
		display: flex;
		flex-direction: column !important;
		justify-content: flex-start !important;
		align-items: flex-start !important;

		view:after {
			display: none;
		}

		view {
			padding: 0;
		}

		.form-check-group-t {
			display: block;
			margin-bottom: 20rpx;
		}

		.chck-col {
			display: inline-flex;
			align-items: center;
			margin-right: 20rpx;

			/deep/ .uni-checkbox-input {
				width: 30rpx;
				height: 30rpx;
			}

			/deep/ .uni-checkbox-input-checked {
				width: 30rpx;
				height: 30rpx;

				&:before {
					font-size: 24rpx;
				}
			}

			.c-label {
				padding-top: 4rpx;
			}
		}

		/deep/ .u-number-input {
			border: none !important;
		}

	}
</style>
